<template>
    <div class="location-detail">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <router-link to="/user/location">党建地点</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>党建地点详细信息</el-breadcrumb-item>
      </el-breadcrumb>
  
      <el-card class="detail-card" v-if="location">
        <div class="image-container">
          <img :src="location.photo" class="location-photo" alt="Location Photo"/>
        </div>
        <div class="location-info">
          <h2 class="location-name">{{ location.name }}</h2>
          <p>位置: {{ location.address }}</p>
          <p>类型: {{ location.type }}</p>
          <p>预约人数: {{ location.number }} 人</p>
          <p>创建时间: {{ location.createTime }}</p>
          <p>更新时间: {{ location.updateTime }}</p>
          <el-button type="primary" @click="editLocation">编辑地点</el-button>
          <el-button type="danger" @click="deleteLocation">删除地点</el-button>
        </div>
      </el-card>
  
      <el-dialog title="提示" :visible.sync="isDeleteDialogVisible" @close="isDeleteDialogVisible = false">
        <span>确定删除此地点吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isDeleteDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="confirmDelete">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import { selectByNameService, deleteLocationService } from '@/api/location'; // 引入你的 API 服务
  import { ElMessage } from 'element-plus';
  
  const route = useRoute();
  const location = ref(null);
  const isDeleteDialogVisible = ref(false);
  
  const fetchLocationDetail = async () => {
    const locationId = route.params.locationId;
    try {
      const response = await selectByNameService(locationId); 
      location.value = response.data; // 假设返回的数据在data字段内
    } catch (error) {
      ElMessage.error('获取地点信息失败');
    }
  };
  
  const deleteLocation = () => {
    isDeleteDialogVisible.value = true;
  };
  
  const confirmDelete = async () => {
    const locationId = route.params.locationId;
    try {
      await deleteLocationService(locationId); // 使用deleteLocationService进行删除
      ElMessage.success('地点删除成功');
      // You may want to refresh or redirect after deletion
      // this.$router.push('/user/location');
    } catch (error) {
      ElMessage.error('删除地点失败');
    }
  };
  
  const editLocation = () => {
    // Navigate to the edit page with the locationId
    const locationId = route.params.locationId;
    router.push({ name: 'EditLocation', params: { locationId } }); // Assuming you have an EditLocation route set up
  };
  
  onMounted(fetchLocationDetail);
  </script>
  
  <style scoped>
  .location-detail {
    margin: 20px;
  }
  
  .detail-card {
    padding: 20px;
    display: flex;
  }
  
  .image-container {
    width: 200px; /* Fixed size for the image */
    height: 200px;
    overflow: hidden; /* Hide overflow */
  }
  
  .location-photo {
    width: 100%; /* Fill the container */
    height: 100%; /* Fill the container */
    object-fit: cover; /* Keep the aspect ratio */
    border-radius: 5px; /* Rounded corners */
  }
  
  .location-info {
    padding-left: 20px;
  }
  
  .location-name {
    color: #42b983;
  }
  </style>
  